<template>
    <div class="common-layout">
      <el-container>
        <el-aside width="200px">
            <div class="menu">
                <Menu/>
            </div>
        </el-aside>
        <el-container>
          <el-header class=".header"><Header/></el-header>
          <el-main><router-view></router-view></el-main>
        </el-container>
      </el-container>
    </div>
  </template>



<!-- <template>
   <div class="layout">
    <div class="menu">
        <Menu/>
    </div>
    <div class="content">
        <Content/>
    </div>
   </div>
</template> -->

<script>

import Menu from '@/views/Menu.vue'
// import Content from '@/views/Content.vue'
import Header from '@/views/Header.vue'

export default {
    data(){
        return{
          
        }
    },
    components: {
        Menu,
        //Content,
        Header
    }
}
</script>

<style scoped>body, hr, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, blockquote, p {
    padding: 0;
    margin: 0;
  }
  
  /*列表样式消除*/
  
  ol, ul, li {
    list-style: none;
  }

.menu{
    width:200px;
    background:#112f50;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
}
.content{
    padding-left: 200px;
}

.el-header{
    padding: 0 0px;
}

.el-main{
    height: 100%;
    width: 100%;
    margin-top: 50px;
    position: fixed;
}

</style>